<template>
	<view class="page" :class="getThemeClass">
		<unavbar :isback="false" class="my-nav-ber-a-box mallunavbar">
			<view class="malltab flex justify-between align-center">
				<view class="text-main size-30" :class="tabcolor == 1 ?'text_green':''" @click="mallcbtn">
					藏品商城
				</view>
				<view class="text-main size-30" :class="tabcolor== 2 ?'text_green':''" @click="marketcbtn">
					流转市场
				</view>
			</view>
		</unavbar>
		<view class="mall_concent" v-if="tabcolor == 2">
			<view class="slide_type_list"><!-- :style="{ backgroundImage: 'url(' + item.pic + ')' }" -->
				<view class="type_list_cont">
					<view v-for="(item,index) in datetop" :key="item.id" class="list_cont_view"  @click="Skippage(index)">
						<view class="list_cont_view_title">{{item.name}}</view>
						<view class="list_cont_view_bg">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list_cont_view" style="background: linear-gradient(90deg, #A6F88D 2%, #8AF9AB 100%); color: #000" @click="Skippage(0)" v-if="screening.length == 9">
						更多
					</view>
				</view>
			</view>
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">
					<!-- <image src="/static/images/index/dark/homeicon.png" class="img-20" mode=""></image> -->
					<image src="/static/images/index/dark/Mutu-meta.png" class="metaimg" mode=""></image>
				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/index/dark/tuijian.png" class="img-16" mode=""></image>
					<view class="text">全部商品</view>
				</view>
				<view class="sdchange_switch flex justify-between align-center"  @click="click_double">
					<view class="">切换{{isDouble?'双':'四'}}列显示</view>
					<image src="/static/images/index/dark/moshi.png" class="img-28" v-if="isDouble"></image>
					<image src="/static/images/index/dark/moshi.png" class="img-28" v-else></image>
				</view>
			</view>
			
			<myfour-goods-list1 :datebotton="datebotton" :listStatus="listStatus" :doubleLine="isDouble"  listType="hmblind" @click="clickGoods" />

		</view>
		<view class="mall_concent" v-if="tabcolor == 1">
			<view class="slide_type_list"><!-- :style="{ backgroundImage: 'url(' + item.pic + ')' }" -->
				<view class="type_list_cont">
					<view v-for="(item,index) in screening" :key="item.id" class="list_cont_view"  @click="Skippage(index)">
						<view class="list_cont_view_title">{{item.name}}</view>
						<view class="list_cont_view_bg">
							<image :src="item.pic" mode="aspectFill"></image>
						</view>
					</view>
					<view class="list_cont_view" style="background: linear-gradient(90deg, #A6F88D 2%, #8AF9AB 100%); color: #000" @click="Skippage(0)" v-if="screening.length == 9">
						更多
					</view>
				</view>
			</view>
			<view class="home-sdchange flex justify-between align-center">
				<view class="sdchange_icon flex justify-between align-center">
					<!-- <image src="/static/images/index/dark/homeicon.png" class="img-20" mode=""></image> -->
					<image src="/static/images/index/dark/Mutu-meta.png" class="metaimg" mode=""></image>
				</view>
				<view class="sdchange_text flex justify-start align-center">
					<image src="/static/images/index/dark/tuijian.png" class="img-16" mode=""></image>
					<view class="text">全部藏品</view>
				</view>

			</view>
			<view class="my-filter u-m-t-20">
				<view class="filter-options-box">
						<view class="filter-item name" :class="sortingPrice !== 0? 'active' : ''" @click="changegoods">
							<view class="u-m-r-10">分类</view>
							<image src="/static/images/triangle.png" style="width: 19rpx; height: 13rpx;"></image>
						</view>
						<view class="filter-item name u-m-l-25" :class="sortingTime !== 0? 'active' : ''" @click="changeSortingTime">
							<view class="u-m-r-10">发行时间</view>
							<image
								:src="
									sortingTime === 0?'/static/images/filter.png' : 
									sortingTime === 1?'/static/images/filterTop.png' : 
									sortingTime === 2?'/static/images/filterBot.png' : ''"
								style="width: 14rpx; height: 25rpx;"
							></image>
						</view>
						<view class="sdchange_switch flex justify-between align-center"  @click="click_double">
							<image src="/static/images/index/dark/moshi.png" class="img-28" v-if="isDouble"></image>
							<image src="/static/images/index/dark/moshi.png" class="img-28" v-else></image>
							<view class="" style="margin-left: 20rpx;margin-right: 20rpx;">切换{{isDouble?'双':'四'}}列显示</view>
							
						</view>
				</view>
			</view>
			<myfour-goods-list :listData="listData" :listStatus="listStatus" :doubleLine="isDouble"  listType="hmblind" @click="clickGoods" />
			
			<!-- 分类 -->
			<u-select
				:list="goods_class" 
				v-model="goodshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[goodsListIndex]"
				@confirm="goodsCallback"
			></u-select>
			<!-- 等级 -->
			<u-select
				:list="grade_class" 
				v-model="gradeshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[gradeListIndex]"
				@confirm="gradeCallback"
			></u-select>
			<!-- 状态 -->
			<u-select
				:list="state_class" 
				v-model="stateshow" 
				value-name="id" 
				label-name="name" 
				confirm-color="#000000" 
				:default-value="[stateListIndex]"
				@confirm="stateCallback"
			></u-select>
			<u-toast ref="uToast" />
		</view>
		
		<u-tabbar
		:list="tabbar" 
		:mid-button="true" 
		:border-top="false"
		inactive-color="#798387"
		active-color="#CAFD5C"
		mid-button-size = "135"
		bg-color="#242424">
		</u-tabbar>
	</view>
</template>

<script>
	import count from '../../components/count.vue'
	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		components: {
			count
		},
		data() {
			return {
				type: 0,
				listData: [],
				tabbar: tabbar,
				listStatus: 'loading',
				listPages: 0,
				listLimit: 8,
				screening: [],
				datetop:[],
				datebotton:[],
				date:[],
				screeningActiveList: [],
				showScreening: false,
				isDouble: true,
				searchKeyword: '',
				searchTypeList: [
					{
						text: '商品',
						id: 1,
					},
					{
						text: '艺术家',
						id: 2,
					}
				],
				searchTypeText: '商品',
				searchTypeId: 1,
				showSearchTypeList: false,
				sortingTime: 0,
				sortingPrice: 0,
				sortinggrade: 0,
				sortingstate: 0,
				tabcolor:1,
				// 分类
				goods_class:[],
				goodshow:false,
				goodsListIndex:0,
				screeningId:0,
				// 等级
				grade_class:[],
				gradeshow:false,
				gradeListIndex:0,
				rarity_type:0, //等级传参
				// 状态
				state_class:[],
				stateshow:false,
				stateListIndex:0,
				show_type:0,   //状态传参
				two_class_id:0
 			};
		},
		onShow() {
			this.loadData(true, true);
			this.loadIndex(true, true)
			this.loa()
		},
		onLoad() {
			
		},
		onPullDownRefresh() {
			this.loadData(true, true);
			this.loadIndex(true, true)
		},
		onReachBottom() {
			if(this.listStatus === 'loadmore'){
				this.loadData(false, false)
			}
			// loadIndex
			
		},
		methods: {
			loadData(reset, initialize){
				this.two_class_id = uni.getStorageSync('two_class_id');
				if(reset){
					this.listData = []
					this.listPages = 0
				}
				this.listStatus = 'loading'
				this.listPages += 1
				
				this.$u.api.index({
					page: this.listPages,
					// limit: this.listLimit,
					type:this.type,
					class_id: this.screeningId,
					// key_word: this.searchKeyword,
					dates: this.sortingTime,
					rarity_type: this.rarity_type,
					show_type: this.show_type,
					two_class_id: this.two_class_id
				})
				.then(res => {
					this.listData = [...this.listData, ...res.data.list.data]
					this.listStatus = res.data.list.next_page_url ? 'loadmore' : 'nomore'
					if(res.data.list.current_page == 1){
						// 上面一级分类
						let onepoints = []
						onepoints = res.data.goods_class
						if(onepoints.length>9){
							this.screening = onepoints.slice(0, 9)
						}else{
							this.screening = onepoints
						}
						// 分类筛选
						this.goods_class = res.data.goods_class.map((item,index)=>{
							return {...item, extra: index+1};
						})
						let obj = {
							id:0,
							name:'全部',
							extra: 0
						}
						this.goods_class.unshift(obj);
						// 等级筛选
						this.grade_class = Object.keys(res.data.rarity_list).map((key,index) => {
							return { id: parseInt(key), name: res.data.rarity_list[key] ,extra:index};
						});
						// 发售状态筛选
						this.state_class = Object.keys(res.data.show_type_list).map((key,index) => {
							return { id: parseInt(key), name: res.data.show_type_list[key] ,extra:index};
						});
					}
					uni.stopPullDownRefresh()
				})
				.catch(err => {
					uni.stopPullDownRefresh()
					this.listStatus = 'nomore'
				});
				
			},
			loadIndex(){
				console.log(111);
			this.$u.api.index({}).then(res=>{
				this.datetop=res.data.goods_class
				this.datebotton=res.data.list
				console.log(this.datebotton);
			})
			},
			// loadIndex(reset, initialize){
			// 	this.$u.api.index({
			// 		page: this.listPages,
			// 		// limit: this.listLimit,
			// 		type:this.type,
			// 		class_id: this.screeningId,
			// 		// key_word: this.searchKeyword,
			// 		dates: this.sortingTime,
			// 		rarity_type: this.rarity_type,
			// 		show_type: this.show_type,
			// 		two_class_id: this.two_class_id
			// 	})
			// 	.then(res => {
			// 		this.listData = [...this.listData, ...res.data.list.data]
			// 		this.listStatus = res.data.list.next_page_url ? 'loadmore' : 'nomore'
			// 		if(res.data.list.current_page == 1){
			// 			// 上面一级分类
			// 			let onepoints = []
			// 			onepoints = res.data.goods_class
			// 			if(onepoints.length>9){
			// 				this.indexs = onepoints.slice(0, 9)
			// 			}else{
			// 				this.indexs = onepoints
			// 			}
			// 		}
			// 		uni.stopPullDownRefresh()
			// 	})
			// 	.catch(err => {
			// 		uni.stopPullDownRefresh()
			// 		this.listStatus = 'nomore'
			// 	});
				
			// },
			
			mallcbtn(){
				this.tabcolor = 1
			},
			marketcbtn(){
				// uni.showToast({
				// 	icon:'none',
				// 	title:'待开放'
				// })
				this.tabcolor = 2
			},
			searchChange(){
				this.loadData(true, false)
			},
			changeSearchType(index){
				this.searchTypeText = this.searchTypeList[index].text
				this.searchTypeId = this.searchTypeList[index].id
			},
			// 时间
			changeSortingTime(){
				if(this.sortingTime < 2){
					this.sortingTime += 1
				} else {
					this.sortingTime = 0
				}
				this.sortinggrade = 0
				this.sortingPrice = 0
				this.sortingstate = 0
				this.loadData(true, false)
			},
			// 分类
			changegoods(){
				this.sortinggrade = 0
				this.sortingstate = 0
				this.sortingPrice = 1
				uni.removeStorageSync('two_class_id');
				this.goodshow = true
			},
			goodsCallback(index){
				console.log(index);
				this.goodsListIndex = index[0].extra;
				this.screeningId = index[0].value
				this.loadData(true, false)
			},
			// 等级
			changegrade(){
				this.sortingstate = 0
				this.sortingPrice = 0
				this.sortinggrade = 1
				this.gradeshow = true
			},
			gradeCallback(index){
				console.log(index);
				this.gradeListIndex = index[0].extra;
				this.rarity_type = index[0].value
				this.loadData(true, false)
			},
			// 状态
			changestate(){
				this.sortingPrice = 0
				this.sortinggrade = 0
				this.sortingstate = 1
				this.stateshow = true
			},
			stateCallback(index){
				console.log(index);
				this.stateListIndex = index[0].extra;
				this.show_type = index[0].value
				this.loadData(true, false)
			},
			changeScreenings(){
				this.showScreening = true
			},
			Skippage(pid){
				// console.log(pid,'pida');
				uni.navigateTo({
					url:'/pages/tabbar/bazaar/mallclassify?pid=' + pid
				})
			},
			//切换单双列
			click_double(){
				this.isDouble=!this.isDouble
			},
			clickGoods(goods){
				if (goods.products_status === 0 || goods.products_status === 5) { //在售
					// uni.navigateTo({
					// 	url: '../../market/goods-def/goods-def?id=' + goods.id
					// })
					uni.navigateTo({
						url: "/pages/market/goods-def/goods-batch?id="+goods.id
					})
				}
				if (goods.products_status === 2) { //拍卖
					uni.navigateTo({
						url: '../../market/goods-auctionDef/goods-auctionDef?id=' + goods.id
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>	
	.page {
		background-size: 100% 180rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		// background-color: #FBF7F2;
		.my-filter{
			width: 695rpx;
			margin: 0 auto;
			.filter-options-box{
				.filter-item{
					width: 160rpx;
					font-size: 22rpx;
					background-color: transparent;
					// color: #2D3746;
					justify-content: space-around;
					border-radius: 7rpx;
					background-color: #1E1E1E;
				}
			}
		}
		.home-sdchange{
			width: 100%;
			height: 74rpx;
			border-radius: 10rpx;
			padding: 0 30rpx;
			color: #999999;
			position: relative;
			.sdchange_icon{
				position: absolute;
				top: -20rpx;
				.metaimg{
					width: 90rpx;
					height: 30rpx;
					padding-left: 15rpx;
				}
			}
			.sdchange_text{
				width: 50%;
				.text{
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
					padding-left: 15rpx;
				}
			}
			.sdchange_switch{
				width: 50%;
				height: 54rpx;
				font-size: 22rpx;
				color: #000000;
				padding: 0 20rpx;
				border-radius: 12rpx;
				background: linear-gradient(90deg, #ACF887 0%, #86F9AF 100%, #86F9AF 100%);
			}
		}
	}
	.mallunavbar{
		box-shadow: 0rpx 5rpx 10rpx 1rpx rgba(134, 249, 175, 0.3);
		.malltab{
			width: 100%;
			height: 88rpx;
			padding: 0 160rpx 0 180rpx;
			.text_green{
				color: #73F6A2;
			}
		}
	}
	.author-avatar{
		width: 50rpx;
		height: 50rpx;
		border-radius: 25rpx;
	}
	.soldout{
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		border-radius: 0 0 0 20rpx;
		padding: 8rpx 15rpx;
		font-size: 26rpx;
		color: #eee;
		z-index: 1;
	}

	.search_box {
		display: flex;
		align-items: center;
		margin: 30rpx 30rpx 0;
		background-color: #fff;
		border-radius: 34rpx;

		.cla {
			display: flex;
			text-align: center;
			margin-left: 24rpx;
			color: #818488;

			.cla_text {
				font-size: 30rpx;
				padding-bottom: 6rpx;
				margin-right: 6rpx;
			}
		}
	}
	.my-search-box{
		position: relative;
		z-index: 0;
		margin-bottom: 0;
		margin-top: calc(var(--status-bar-height) + 15rpx);
	}
	.slide_type_list{
		padding: 90rpx 10rpx 50rpx;
		.type_list_cont{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.list_cont_view{
				position: relative;
				width: 128rpx;
				height: 64rpx;
				font-size: 22rpx;
				font-weight: normal;
				text-align: center;
				line-height: 68rpx;
				margin: 10rpx;
				border-radius: 10rpx;
				white-space: nowrap; /* 设置文本不换行 */
				overflow: hidden; /* 隐藏超出容器的部分 */
				text-overflow: ellipsis; /* 超出部分用省略号表示 */
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
				.list_cont_view_title{
					position: absolute;
					top: 0;
					left: 20rpx;
					z-index: 100;
				}
				.list_cont_view_bg{
					position: absolute;
					top: 0;
					left: 0;
					width: 128rpx;
					height: 64rpx;
					border-radius: 10rpx;
					background-color: #000;
					z-index: 1;
					image{
						opacity:0.6;
						filter: alpha(opacity=60);
						width: 128rpx;
						height: 64rpx;
					}
				}
			}
		}
	}
	.filter {
		display: flex;
		margin: 34rpx 38rpx 20rpx 42rpx;
		justify-content: space-between;

		.filter_left {
			display: flex;
		}

		.filter_item {
			display: flex;
			align-items: center;
			color: #919191;
			font-size: 24rpx;
			padding: 10rpx 15rpx;
			background-color: rgba(#999999, .3);
			border-radius: 50rpx;

			image {
				width: 14rpx;
				margin-left: 8rpx;
			}
		}

		.filter_item:nth-child(2) {
			margin-left: 40rpx;
		}

		.filter_right {
			display: flex;
			align-items: center;
			color: #666666;
			font-size: 24rpx;
		}
	}

	.filter_selected {
		display: flex;
		margin: 0 30rpx;

		.category {
			display: flex;
			padding: 12rpx 22rpx;
			align-items: center;
			border-radius: 24rpx;
			font-size: 24rpx;
			margin-left: 16rpx;

			.del {
				margin-top: 4rpx;
				margin-left: 8rpx;
			}
		}
	}

	.popup_title {
		margin: 52rpx auto 60rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	/deep/.u-close--top-right {
		top: 54rpx;
		right: 44rpx;
	}

	.filter_title {
		font-size: 30rpx;
		color: #999999;
		margin-bottom: 58rpx;
	}

	.popular {
		margin-bottom: 42rpx;
		display: flex;
		flex-wrap: wrap;

		.popular_item {
			padding: 22rpx 52rpx;
			border: 1px solid #D4D4D4;
			border-radius: 10rpx;
			margin: 0 16rpx 20rpx 0;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.bot_btn {
		display: flex;
		margin: 96rpx 32rpx 62rpx;

		button {
			flex: 1;
			border-radius: 10rpx;
			font-size: 28rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		button+button {
			margin-left: 18rpx;
		}

		.reset {
			border: 1px solid #C7CFD4;
			background-color: #fff;
			color: #333333;
		}

		.finish {
			background-color: #764E39;
			color: #fff;
		}
	}

	.checked_style {
		border: 1px solid !important;
	}

	.featured {
		margin: 30rpx 30rpx 0 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 60rpx;

		.featured_item {
			border-radius: 20rpx;
			width: 334rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.plan {
				border-radius: 20rpx;
				width: 100%;
				height: 336rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				position: relative;
			}

			.featured_content {
				padding: 30rpx 24rpx;

				.cont_header {
					display: flex;
					color: #111111;
					font-size: 24rpx;
					align-items: center;

					.avatar_img {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50rpx;
						margin-right: 25rpx;
						overflow: hidden;

						image {
							width: 100%;
						}
					}
				}

				.cont_title {
					font-size: 28rpx;
					font-weight: bold;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.cont_price {
					font-size: 34rpx;
					font-weight: bold;
					margin-top: 40rpx;

					text {
						font-size: 22rpx;
					}
				}
			}

			.like {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50%;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 24rpx;
				}
			}

			.presale {
				position: absolute;
				font-size: 22rpx;
				bottom: 0rpx;
				left: 0;
				width: 100%;
				background: rgba(0, 0, 0, 0.6);
				padding-left: 16rpx;
			}

			.type {
				position: absolute;
				color: #fff;
				font-size: 20rpx;
				bottom: 18rpx;
				right: 18rpx;
			}
		}
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 50rpx;
		height: 50rpx;
		margin-left: -25rpx;
		margin-top: -25rpx;
	}
</style>
